<table id="selected_table" class="layui-hide" lay-filter="selected_table"></table>

<input type="text" style="display: none" id="titleId">

<!--头部按钮-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="batch_pass">批量通过</button>
    </div>
</script>

<!--每行的按钮-->
<script type="text/html" id="barDemo">
    {{#
        if(d.selectStatus == '待老师通过'){ }}
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">达成双选</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">退选</a>
    {{#  }}}
</script>

<script>

    layui.use(['table','layer'], function(){
        let  table = layui.table, layer=layui.layer,
        titleId=document.getElementById("titleId").value;
        table.render({
             elem: '#selected_table'
            ,url:'/api/v1/teacher/students'
            ,id:'selected_list_table'
            ,method:'GET'
            ,toolbar: '#toolbarDemo'
            ,where:{
                "titleId":titleId
            }
            ,defaultToolbar: []
            ,parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.list
                };
            }
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{width:80, title: '序号',type:'numbers'}
                ,{field:'id', width:80, sort: true,hide:true}
                ,{field:'studentId', width:142, title: '学号',sort:true}
                ,{field:'studentName',width:130, title: '姓名', sort: true,}
                ,{field:'selectTime', width:193, title: '选择时间'}
                ,{field:'selectStatus', title: '状态', width:320}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:161}
            ]]
            ,page: true
        });

        // 达成双选
        function student_pass(data){
            let ids='';
            layer.confirm('是否确认选择的学生达成双向选择?', {
                    btn: ['确认', '取消']
                },function(index, layero){
                for(let i=0;i<data.length;i++){
                    if(i===0){
                        ids=ids+data[i].id;
                    }else{
                        ids=ids+","+data[i].id;
                    }
                }
                postAJAX("PATCH","/api/v1/teacher/passStudentSelected",{"id":ids},null,(data)=>{
                    if(data.code===0){
                        layer.msg("选择成功");
                        table.reload('selected_list_table')
                    } else {
                        layer.msg("选择失败");
                    }
                });
                }
            );
        }

        // 拒绝该学生的选择
        function student_reject(id){
            layer.open({
                type: 2,
                title:'退选原因',
                area: ['672px', '347px'],
                content: '/static/page/teacher/reject_select_student.html',
                shadeClose: true,
                success: function(layero, index) {
                    // 把要退选记录的id传入到退选原因页面中
                    var body = layer.getChildFrame('body', index);
                    var input_array = body.find('input');
                    input_array[0].value=id;
                },
                end:function(){
                    table.reload('selected_list_table')
                }
            })
        }

        // 监听每一行的工具条
        table.on('tool(selected_table)', function(obj){
            let layEvent = obj.event;
            if(layEvent === 'detail'){
                // 达成双选
                let object=new Object();
                object.id=obj.data.id;
                let array=[object];
                student_pass(array);
            } else if(layEvent === 'edit'){
                // 退选某个学生
                student_reject(id)
            }
        });


        //  监听头部工具条
        table.on('toolbar(selected_table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch(obj.event){
                case 'batch_pass':
                    student_pass(data);
                    break;
            }
        });

    });
</script>